<template>
  <div class="notice">
    <nav>
      <div class="box">
        <router-link to="/hlfmessage" style="color: #333;">
        <van-icon name="arrow-left" class="icon icon-left" />
        </router-link>
        <span>公告信息</span>
        <img  src="" alt="">
      </div>
    </nav>
    <ul class="list">
      <li v-for="(notice, index) in notices" :key="index">
        <div class="imga">
          <img src="https://mall.leyifan.com/static/h5/new_images/news.png" alt="" />
        </div>
        <div class="left">{{ notice.info }}</div>
        <div class="right">{{ formatDate(notice.time) }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
// 固定语法
import { ref } from 'vue'
// 导入axios
import axios from '@/api/axios'
// 响应式变量（固定语法）
let notices = ref([])
// 日期格式化  xxxx/xx/xx
function formatDate(dateString: string): string {
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}/${month}/${day}`
}
axios
  .get('/api/front/index')
  .then((res) => {
    notices.value = res.data.data.notice.slice(0, 30)  // 限制最大显示条数为30条) 
    console.log('请求成功', notices) // 检查返回的数据结构
  })
  .catch((error) => {
    console.error('请求失败:', error)
  })
</script>

<style lang="less" scoped>
.notice {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  padding: 40rem 0;
//   导航栏
  nav {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    .box {
      width: 100vw;
      height: 40rem;
      background-color: #fff;
      font-size: 18rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      img{
        width: 24rem;
        height: 24rem;
         position: absolute;
          right: 14rem;
      }
      .icon-left {
        position: absolute;
        top: 12rem;
        left: 14rem;
        font-size: 18rem;
      }
      span {
        line-height: 40rem;
        font-size: 14rem;
        // font-weight: bold;
      }
    }
  } 
// 公告列表
  .list {
    padding: 0 10rem;
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15rem 0;
      img {
        display: block;
        width: 20rem;
        height: 20rem;
        // padding-right: -5rem;
      }
      .left {
        width: 200rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14rem;
        margin-left: -50rem;
      }
      .right {
        color: #999;
        font-size: 14rem;
      }
    }
  }
}
</style>